<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
//输入框是否获取焦点
const isActive = ref(false)
// 搜索内容
const keyword = ref(undefined)
function goSearch(){
    if(!keyword.value ||keyword.value.trim() === ''){
        alert('搜索内容不能为空哦')
        return
    }
    router.push(`/search?name=${keyword.value}`)
}
</script>

<template>
    <div class="content">
        <nav>
    <div class="left">
        <img src="/public/logo.png" alt="">
    </div>
    <ul class="mid">
        <li>
            <router-link to="#">优质手机</router-link>
        </li>
        <li>
            <router-link to="#">优质电视</router-link>
        </li>
        <li>
            <router-link to="#">51买菜</router-link>
        </li>
        <li>
            <router-link to="#">促销产品</router-link>
        </li>
        <li>
            <router-link to="#">零元购</router-link>
        </li>
        <li>
            <router-link to="#">合作中心</router-link>
        </li>
    </ul>
    <div class="right" :class="{active: isActive}">
        <el-input @focus="isActive = true" @blur="isActive = false" v-model="keyword" @keyup.enter="goSearch"></el-input>
        <button class="iconfont" @click="goSearch">&#xeafe;</button>
    </div>
</nav>
    </div>

</template>

<style scoped lang="less">
nav{
    height: 100px;
    .left{
        float: left;
        height: 100%;
        width: 100px;
        text-align: center;
        line-height: 136px;
        img{
            width: 71px;
            height: 65px;
        }
    }
    .mid{
        float: left;
        padding-left: 140px;
        width: 800px;
        height: 100%;
        li{
            float: left;
            height: 100%;
            width: 88px;
            text-align: center;
            line-height: 100px;
            a{
                transition: all .3s;
                font-size: 16px;
                color: black;
            }
            &:hover{
                a{
                    color: #5ebced;
                }
            }
        }
    }
    .right{
        margin-top: 25px;
        border: 1px solid #e0e0e0;
        // padding-top: 20px;
        float: right;
        width: 290px;
        height: 50px;
        transition: all .3s;
        :deep(.el-input){
            vertical-align: top;
            width: 80% ;
            height: 100%;
            border: none;
            outline: none;
            .el-input__wrapper{
                border-radius: 0px;
                box-shadow: none;
            }
        }
        button{
            cursor: pointer;
            width: 20%;
            height: 100%;
            background-color: #fff;
            border-left: 1px solid #e0e0e0;
            &:hover{
        transition: all .3s;

                background-color: #5ebced;
            }
        }
        &:hover{
         border: 1px solid #b0b0b0;
         button{
            border-left: 1px solid #b0b0b0;

         }   
        }
        
    }
    .active{
        border: 1px solid #5ebced !important;
        button{
            border-left: 1px solid #5ebced !important;

        }
    }
}
</style>
